﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="News.DetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:News"
    xmlns:data="using:News.Data"
    xmlns:common="using:News.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="TopApp" Background="#FF2D2D2D">
            <Grid Height="140">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="20,0">
                    <Button x:Name="Home" Click="Home_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="0,0,5,0">
                        <Grid x:Name="grid" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarHome.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="India" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image1" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarIndia.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="World" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image2" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarWorld.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="EditorsPick" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid3" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image3" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarEditorsPick.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="Business" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid4" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image4" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarBusiness.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="Editorial" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid5" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image5" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarEditorial.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="arts" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid6" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image6" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarArts.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                    <Button x:Name="Threads" Click="World_Clicked" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Style="{StaticResource AppBarBtnStyle}" Margin="5,0">
                        <Grid x:Name="grid7" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                            <Image x:Name="image7" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Images/AppBar/AppBarThreads.png" Margin="0,6,0,0" Width="86" Height="87"/>
                        </Grid>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
           d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:DetailDataSource, IsDesignTimeCreatable=True}}"/>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">International News</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.Background>
            <ImageBrush ImageSource="Assets/Images/Background.jpg" Stretch="UniformToFill"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Horizontal scrolling grid used in most view states -->

        <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">        
        <StackPanel Orientation="Horizontal" Grid.Row="1">
            <StackPanel x:Name="stackPanel" Margin="120,0,0,0">
                <TextBlock Text="Superstorm Sandy slams into Atlantic coast" Foreground="#FFaa0058" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                <Image Source="ms-appx:///Assets/Images/DetailPage/Img01.jpg" Stretch="UniformToFill" Margin="0,10"/>
                    <StackPanel Width="263" Height="60" HorizontalAlignment="Left" Margin="0,20,0,0" Background="#FFd7d7d7">
                        <TextBlock Text="International, Speak Out" FontWeight="Bold" Foreground="#FF686868" Margin="10,10,0,0" FontSize="18"/>
                        <TextBlock Text="Dec 16, 2012 | Lorem Ipsum" FontWeight="Light" FontStyle="Italic" Foreground="#FF686868" Margin="10,0,0,0" FontSize="16"/>

                    </StackPanel>
                    </StackPanel>
            <RichTextBlock x:Name="richTextBlock" Style="{StaticResource BodyRichTextStyle}" Width="297" Foreground="#DE000000" Margin="80,40,0,80" FontSize="16" VerticalAlignment="Top" LineHeight="16" OverflowContentTarget="{Binding ElementName=ov}">
                <Paragraph>
                    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac velit nisi, vel fringilla augue. Aliquam vestibulum pulvinar cursus. Nam consectetur elit convallis odio suscipit sit amet adipiscing augue mollis. Praesent suscipit ornare risus, sed dictum nibh dictum sed. Ut posuere auctor est eu consequat. Suspendisse felis massa, elementum ac placerat non, cursus eget urna. "/>
                    <LineBreak />
                </Paragraph>
                <Paragraph>
                    <Run Text="Quisque mauris sapien, elementum eu sagittis eu, condimentum sed arcu. Aliquam erat volutpat. Duis convallis posuere elit, non malesuada ante volutpat nec. Duis suscipit leo rhoncus est pellentesque lobortis. Praesent iaculis tincidunt diam."/>
                    <LineBreak/>
                </Paragraph>
                <Paragraph>
                    <Run Text="Vivamus auctor enim eget sem lobortis convallis. In pellentesque, tellus sit amet interdum bibendum, mauris nisi tincidunt sem, sit amet gravida diam magna et felis. Nam placerat metus vel dui sodales malesuada. Nulla metus leo, feugiat congue sodales non, porta sit amet dui. "/>
                    <LineBreak/>
                </Paragraph>
                <Paragraph>
                    <Run Text="Quisque mauris sapien, elementum eu sagittis eu, condimentum sed arcu. Aliquam erat volutpat. Duis "/>
                    <LineBreak/>
                </Paragraph>
                <Paragraph>
                    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac velit nisi, vel fringilla augue. Aliquam vestibulum pulvinar cursus. Nam consectetur elit convallis odio suscipit sit amet adipiscing augue mollis. Praesent suscipit ornare risus, sed dictum nibh dictum sed. Ut posuere auctor est eu consequat. Suspendisse felis massa, elementum ac placerat non, cursus eget urna."/>
                    <LineBreak/>
                </Paragraph>
                <Paragraph>
                    <Run Text="Quisque mauris sapien, elementum eu sagittis eu, condimentum sed arcu. Aliquam erat volutpat. Duis convallis posuere elit, non malesuada ante volutpat nec. Duis suscipit leo rhoncus est pellentesque lobortis. Praesent iaculis tincidunt diam."/>
                    <LineBreak/>
                </Paragraph>
                <Paragraph>
                    <Run Text="Vivamus auctor enim eget sem lobortis convallis. In pellentesque, tellus sit amet interdum bibendum, mauris nisi tincidunt sem, sit amet gravida diam magna et felis. Nam placerat metus vel dui sodales malesuada. Nulla metus leo, feugiat congue sodales non, porta sit amet dui. "/>
                    <LineBreak/>
                </Paragraph>
                <Paragraph>
                    <Run Text="Quisque mauris sapien, elementum eu sagittis eu, condimentum sed arcu. Aliquam erat volutpat. Duis convallis posuere elit, non malesuada ante volutpat"/>
                    <LineBreak/>
                </Paragraph>
            </RichTextBlock>
            <RichTextBlockOverflow x:Name="ov" MaxWidth="297"  Margin="80,40,0,80" VerticalAlignment="Top"/>
            <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"            
            Padding="80,0,0,80"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource ArticlesDataTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false">

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>                        
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="1,0,0,6">
                                <Button
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Foreground="#FFff3739" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Background="#FFd0cdce" Orientation="Vertical" Margin="0,0,120,0" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
        </StackPanel>
        </ScrollViewer>
        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
            Visibility="Collapsed"
            Margin="0,-10,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard80ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                <Button
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" VerticalAlignment="Center" Margin="36,0"/>
           <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Foreground="Black" VerticalAlignment="Bottom" Margin="0,0,32,50"/>
            <Image x:Name="image8" Grid.Column="2" Source="Assets/AppLogo.png" HorizontalAlignment="Right" Margin="0,0,20,0" Width="200"/>
        </Grid>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Please Switch to Fullscreen" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe UI" FontSize="29.333" Grid.Row="1" Visibility="Collapsed"/>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image1">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image2">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image3">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image4">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image5">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image6">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image7">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>70</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image1">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image2">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image3">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image4">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image5">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image6">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image7">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>71</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>100,0,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Visible</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="TopApp">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image8">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="40" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="pageTitle" d:IsOptimized="True"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="backButton">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>36,36,36,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="pageTitle">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>-30,0,32,55</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
